<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
<meta charset="utf-8">
<title>网页版QQ</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
<meta name="author" content="Vincent Garreau"/>
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../static/lib/layui/css/layer.css" th:href="@{/lib/layui/css/layer.css}" media="all">

<link rel="stylesheet" href="../static/lib/layui/css/layui.css" th:href="@{/lib/layui/css/layui.css}"
      media="all">
</head>
<body>
<audio id="wav" src="../static/lib/layui/css/modules/layim/voice/msg.wav"
       th:src="@{/lib/layui/css/modules/layim/voice/msg.wav}"
       controls="controls" autostart="true" loop="false" hidden="true" ></audio>

<!--
<script th:src="@{/lib/jquery/jquery-3.2.1.min.js}" src="../static/lib/jquery/jquery-3.2.1.min.js"></script>
-->
<script src="../static/js/common/public.js" th:src="@{/js/common/public.js}"></script>
<script src="../static/lib/layui/layui.js" th:src="@{/lib/layui/layui.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var outerLayim;
    (function () {
        var path = "/lib/layui/css/modules/layim/voice/msg.wav";
        var mp3 = new Audio(path);
        var $;
        var wav = document.getElementById("wav");
        var layer;
        var cache;
        layui.use('element', function () {
            var element = layui.element;
        });
        layui.use('form', function () {
        });

        layui.use('layer', function () {
            layer = layui.layer;
        });
        layui.use(['jquery'], function(){
            $ = jQuery = layui.$;
            // 你可以在下面的 js 代码中使用你熟悉的 $, jQuery
        });

        layui.use('layim', function (layim) {
            cache = layui.layim.cache();
            outerLayim = layui.layim;
            layim.config({
                //初始化接口
                init: {
                    url: '/inside/init'
                    , data: {}
                }
                //查看群员接口
                /*,members: {
                    url: '/layim/json/getMembers.json'
                    ,data: {}
                }

                ,uploadImage: {
                    url: '' //（返回的数据格式见下文）
                    ,type: '' //默认post
                }
                ,uploadFile: {
                    url: '' //（返回的数据格式见下文）
                    ,type: '' //默认post
                }
*/

                , isgroup: false
                //扩展工具栏

                //,brief: true //是否简约模式（若开启则不显示主面板）

                //,title: 'WebIM' //自定义主面板最小化时的标题
                //,right: '100px' //主面板相对浏览器右侧距离
                //,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离
                //,initSkin: '3.jpg' //1-5 设置初始背景
                //,skin: ['aaa.jpg'] //新增皮肤
                //,isfriend: false //是否开启好友
                //,isgroup: false //是否开启群组
                //,min: true //是否始终最小化主面板，默认false
                //,notice: true //是否开启桌面消息提醒，默认false
                //,voice: false //声音提醒，默认开启，声音文件为：default.mp3

                , find: '/page/listFriend' //发现页面地址，若不开启，剔除该项即可

            });
            // var socket = new WebSocket('ws://' + window.location.host + '/websocket');
            var socket = new WebSocket('ws://' + location.href.substring(7) + 'websocket/[[${session.user.id}]]');
            socket.onopen = function (ev) {
            }
            socket.onclose = function (ev) {

            }
            socket.onmessage = function (ev) {

            }
            layim.on('sendMessage', function (res) {
                console.log(cache)
                res.mine.mine = true;
                res.to.name = res.to.username;
                res.to.type = 'friend';
                if (res.mine.id == res.to.id) {
                    var tempid = res.to.id;
                    res.to.id = res.to.fromid;
                    res.to.fromid = tempid;

                } else {
                    res.to.fromid = res.mine.id
                }
                console.log(res)
                socket.send(JSON.stringify({
                    type: 'chatMessage' //随便定义，用于在服务端区分消息类型
                    , data: res
                }));
            })
            layim.on('sign', function (value) {
                $.ajax({
                    url: '/inside/updateUser',
                    type: 'POST',
                    data: {
                        sign: value
                        , id: '[[${session.user.id}]]'
                    },
                    success: function (data) {
                        layer.msg(data.msg)
                    }
                })

                //此时，你就可以通过Ajax将新的签名同步到数据库中了。
            });
            socket.onmessage = function (res) {
                var data = JSON.parse(res.data);
                console.log(cache)
                console.log(data)
                if (data.type==='friend') {
                    var friend =false;
                    layui.each(cache.friend,function (index1,item1) {
                        layui.each(item1.list,function (index,item) {
                            if (item.id == data.fromid) {
                                item.type = 'friend';
                                item.name = item.username;
                                item.temporary = false;
                                data.temporary = false;
                                cache.chat.push(item);
                                return friend = true;
                            }
                        })
                        if (friend) {
                            return true;
                        }
                    })
                    console.log('friend'+friend)
                    if (!friend) {
                        data.name = data.username;
                        data.temporary = true;
                        cache.chat.push(data);
                    }
                }
                if (data.emit === 'chatMessage') {
                    layim.getMessage(data); //res.data即你发送消息传递的数据（阅读：监听发送的消息）
                }
            };
        });

    })()
</script>
</body>
</html>